<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t; read: 'auth'">
  <main class="auth">
    <div class="auth-wrapper">
      <img
        class="taiga-logo"
        role="presentation"
        width="56"
        height="56"
        ngSrc="/assets/images/LogoTaiga.svg"
        alt="" />
      <h1 class="auth-title">{{ t('reset_password.new_password.title') }}</h1>

      <form
        #form="ngForm"
        [formGroup]="resetPasswordForm"
        (ngSubmit)="submit()"
        data-test="reset-password-form">
        <tg-ui-input
          #input="tgInput"
          class="input-password"
          [label]="t('reset_password.new_password.password_label')"
          [accessibleLabel]="t('password.help_weak', { number: 8 })">
          <input
            type="password"
            formControlName="password"
            inputRef
            data-test="new-password" />

          <ng-container inputError>
            <tg-ui-error
              [enabled]="form.submitted"
              data-test="invalid-password"
              error="required">
              {{ t('signup.errors.password_required') }}
            </tg-ui-error>
          </ng-container>
          <ng-container passwordStrength>
            <tg-ui-password-strength [showErrors]="form.submitted">
            </tg-ui-password-strength>
          </ng-container>
        </tg-ui-input>

        <tg-ui-input
          #input="tgInput"
          class="input-password"
          [label]="t('reset_password.new_password.repeat_password')">
          <input
            type="password"
            formControlName="confirmPassword"
            inputRef
            data-test="new-password-confirmation" />

          <ng-container inputError>
            <tg-ui-error
              [enabled]="form.submitted"
              data-test="invalid-password"
              error="required">
              {{ t('signup.errors.password_required') }}
            </tg-ui-error>
            <tg-ui-error
              [show]="form.submitted && form.errors?.mismatch"
              data-test="invalid-password"
              error="mismatch">
              {{ t('reset_password.new_password.password_match') }}
            </tg-ui-error>
          </ng-container>
        </tg-ui-input>

        <button
          class="submit-reset-password"
          loading
          [loadingMsg]="t('reset_password.new_password.submit_in_progress')"
          [loadingSuccess]="t('reset_password.new_password.submit_success')"
          data-test="submit-button"
          appearance="primary"
          tuiButton
          type="submit">
          {{ t('reset_password.new_password.submit') }}
        </button>

        <p
          withInternalLink
          class="go-back"
          [innerHtml]="
            t('reset_password.go_back', {
              login: 'login' | getUrl
            })
          "></p>
      </form>
    </div>
  </main>
  <footer class="auth-footer">
    <p class="sign-up-link">
      <span>{{ t('login.not_registered_yet') }} </span>
      <a [routerLink]="['/signup']">{{ t('login.create_free_account') }}</a>
    </p>
  </footer>
</ng-container>
